在上回我們曾經提到過@import的用法,
它的功用在於可以將CSS檔案進行切割,
如果是單純要被匯入整合Sass檔,
而並沒有要轉出成CSS檔案的話,
那就在檔案名稱前面加個下底線『_』,例:_button.css,
所以通常只有一個要編譯成CSS,
而這個檔案就會有一堆@import,
編譯出來的CSS檔案就會依照@import的前後排列來依序產生CSS碼。
這裡就來提供一些組織的心法給各位:
首先先來一個基本的設計:
@import mixin //放置所有Sass全域變數與Mixin
@import reset // reset.css
@import extnd // 拿來合併樣式,都放@extend用的檔案
@import layout //共同框架
@import index //首頁
@import page //內頁
@import xxx //各單元CSS
基本上來說,
@import最前面的檔案裏面一定都會先放全域變數與mix,
如果你把 _mixin.sass放在最下面,
那就一定會出錯,
原因自然是因為前面@import有寫到變數的地方找不到值,
所以自然系統沒辦法編譯出來。
再來自然就是放reset檔案,
網頁排版自然必須先將所有瀏覽器預設樣式都統一,
這樣設計出來才不會有問題,
你或許會疑惑說,
那應該是reset放在最上面啊,
為何是Mixin放在最上面呢??
由於第一個檔案都是mixin與變數,
所以是不會產生出任何的code,
再加上有些網頁設計師的習慣,
也會在reset裡面設計導入全域變數,
〔@extend與@mixin並不會實際產生code,只有你去呼叫他才會合併與匯出〕
第三個extend的話則是拿來合併css樣式用的,
通常我們在設計網頁時,
才會發現有些樣式應該可以抽出來進行合併動作,
所以就會統一放在要合併的位置,
所以裡面就統一來放置@extend的語法。
layout則是網頁版型的共通設計,
也就是不管到哪一樣都會有的樣式,
例如:表頭、表尾
再來就index首頁、page內頁,再來就看你的單元數量視情況來切割,
Sass import的用意最主要就是希望你可以把CSS進行切割,
這樣在編輯CSS時就可以聚焦於某功能來進行瀏覽,
將檔案歸類完善,找CSS相對也會方便許多。
另外我們也來看看國外的Sass Way所介紹的Sass結構:
stylesheets/
|
|-- modules/ # Common modules
| |-- _all.scss # Include to get all modules
| |-- _utility.scss # Module name
| |-- _colors.scss # Etc...
| ...
|
|-- partials/ # Partials
| |-- _base.sass # imports for all mixins + global project variables
| |-- _buttons.scss # buttons
| |-- _figures.scss # figures
| |-- _grids.scss # grids
| |-- _typography.scss # typography
| |-- _reset.scss # reset
| ...
|
|-- vendor/ # CSS or Sass from other projects
| |-- _colorpicker.scss
| |-- _jquery.ui.core.scss
| ...
|
`-- main.scss # primary Sass file
你可以看得出來,
這個設計者規劃得Sass還有分資料夾,
將各類功能與模組分得更細,
modules主要是放各種元素的模組,
partials則是放置主結構的CSS,
vendor則是統一放別人寫好的Sass Framework,
所以他的Sass檔案就會這樣子去寫@import,
// Modules and Variables
@import "partials/base";
// Partials
@import "partials/reset";
@import "partials/typography";
@import "partials/buttons";
@import "partials/figures";
@import "partials/grids";
// ...
// Third-party
@import "vendor/colorpicker";
@import "vendor/jquery.ui.core";
一樣也是最上面放mixin,
再來就是reset與layout。
如果你對Sass才剛入門,
建議你採第一種來切割即可,
至多就是多一個vendor資料夾放你要使用的Sass framework。